<template>
    <div class="Recommend">
        <div v-for="item in recommends" class="RecommendItem">
            <a :href="item.link">
                <img :src="item.image" alt="">
                <span>{{item.title}}</span>
            </a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'RecommendView.vue',
    props: {
        recommends: {
            type: Array,
            default() {
                return []
            }
        }
    }
}
</script>

<style scoped>
    .Recommend{
        display: flex;
        padding: 9px 0 20px;
        border-bottom: 9px solid #eee;
    }
    .RecommendItem{
        width: 27%;
    }
    .RecommendItem a{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .RecommendItem a img{
        width: 90%;
    }
    .RecommendItem a span{
        font-size: 14px;
        margin-top: 10px;
    }

</style>